import React, { Component } from 'react'
import {Route , Link} from 'react-router-dom'
import Detail from './Detail';
export default class Message extends Component {
    state = {
        messageArr:[
            {id:'01',title:'消息1'},
            {id:'02',title:'消息2'},
            {id:'03',title:'消息3'}
        ]
    }
    replaceShow = (id, title) =>{
        return ()=> this.props.history.replace(`/home/message/detail/?id=${id}&title=${title}`)
    }
    pushShow = (id, title) =>{
        this.props.history.push(`/home/message/detail/?id=${id}&title=${title}`)
    }
    render() {
        const {messageArr} = this.state
        return (
            <div>
                <ul>
                    {
                        messageArr.map(message => 
                        <li key={message.id}>
                            {/* 
                                使用params传递参数，需要在下面声明
                                <Link to={`/home/message/detail/${message.id}/${message.title}`}>{message.title}</Link> 
                            */}
                            {/* 使用search传递参数 replace不会留下痕迹*/}
                            <Link replace to={`/home/message/detail/?id=${message.id}&title=${message.title}`}>{message.title}</Link> 
                            &nbsp;<button onClick={() => this.pushShow(message.id,message.title)}>push查看</button>
                            &nbsp;<button onClick={this.replaceShow(message.id,message.title)}>replace查看</button>
                            {/* 使用state传递参数 */}
                            {/* <Link to={{pathname:'/home/message/detail',state:{id:message.id,title:message.title}}}>{message.title}</Link> */}
                        </li>)
                    }
                </ul>
                <hr />
                {/* 使用params传递参数 */}
                {/* <Route path='/home/message/detail/:id/:title' component={Detail}/> */}
                {/* 使用search传递参数 */}
                <Route path='/home/message/detail' component={Detail}/>
                {/* 使用state传递参数 */}
                {/* <Route path='/home/message/detail' component={Detail}/> */}
            </div>

        )
    }
}
